<template>
  <div v-if="data" class="bg-[url('@/assets/imgs/bg.png')] bg-cover bg-scroll bg-center h-screen text-white p-2 flex flex-col overflow-hidden">
    <!-- 标题栏 -->
    <div class="relative flex justify-center items-center mb-4 h-16 min-h-[4rem]">
      <!-- 背景装饰层 -->
      <div class="absolute inset-0 flex justify-center items-center z-0">
        <!-- 光效背景 -->
        <div class="absolute w-full h-full bg-[url('')] opacity-30"></div>
        <!-- 装饰线条 -->
        <!-- <div class="absolute left-0 w-1/3 h-1 bg-gradient-to-r from-blue-400 to-transparent z-0 -left-4 opacity-70"></div>
        <div class="absolute right-0 w-1/3 h-1 bg-gradient-to-l from-blue-400 to-transparent z-0 -right-4 opacity-70"></div> -->
      </div>

      <!-- 标题主体 -->
      <div class="relative z-10 flex items-center">
        <!-- 左侧装饰 -->
        <div class="h-8 w-12 bg-[length:100%_100%] bg-[url('')]"></div>
        <!-- 标题文字 -->
        <div class="mx-4 text-[2.5rem] font-bold bg-gradient-to-b from-blue-400 to-white bg-clip-text text-transparent tracking-wider animate-pulse">
          云屏
        </div>
        <!-- 右侧装饰 -->
        <div class="h-8 w-12 bg-[length:100%_100%] bg-[url('')]"></div>
      </div>

      <!-- 左侧按钮组 -->
      <div class="absolute left-0 flex space-x-2 z-20 pl-2">
        <button 
          @click="goBackToDashboard"
          class="bg-blue-800/80 hover:bg-blue-900 text-white font-semibold py-1 px-3 rounded-lg 
                text-sm transition-all duration-300 border border-blue-700/50 shadow-[0_0_8px_rgba(56,180,251,0.3)]
                hover:scale-105 backdrop-blur-sm bg-black/20 backdrop-blur-sm rounded-lg px-2 shadow-[0_0_8px_rgba(56,180,251,0.6)]"
        >
          返回
        </button>
      </div>

      <!-- 右侧按钮组 -->
      <div class="absolute right-0 flex space-x-2 z-20 pr-2">
        <button 
          v-for="(btn, index) in timeButtons" 
          :key="index"
          @click="btn.handler();selectedButtonIndex = index"
          :class="{
            'bg-blue-800/80 hover:bg-blue-900 text-white font-semibold py-1 px-3 rounded-lg text-sm transition-all duration-300 border border-blue-700/50 shadow-[0_0_8px_rgba(56,180,251,0.3)] hover:scale-105 backdrop-blur-sm bg-black/20 backdrop-blur-sm rounded-lg px-2 shadow-[0_0_8px_rgba(56,180,251,0.6)]': true,
            'text-blue-500': selectedButtonIndex === index
          }"
        >
          {{ btn.label }}
        </button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="flex flex-1 overflow-hidden">
      <!-- 左 -->
      <div class="flex-1 mr-2 bg-opacity-5 bg-blue-600 p-3 flex flex-col">
        <RadarBar class="h-1/3 box-border pb-4" :data="data.questionConsumeTimeData"></RadarBar>
        <PieBar class="h-1/3 box-border pb-4" :data="data.searchWordClassData"></PieBar>
        <LineChartLeft class="h-1/3" :data="data.searchVolumeByTimeData"></LineChartLeft>
      </div>
      <!-- 中 -->
      <div class="w-1/2 mr-2 flex flex-col">
        <TotalData class="bg-opacity-5 bg-blue-500 p-3" :data="data.totalData"></TotalData>
        <WordCloud class="bg-opacity-5 bg-blue-500 p-3 mt-2 flex-1" :data="data.hotWordData"></WordCloud>
      </div>
      <!-- 右 -->
      <div class="flex-1 bg-opacity-5 bg-blue-600 p-3 flex flex-col">
        <VerticalBar class="h-1/3 box-border pb-4" :data="data.topPersonData"></VerticalBar>
        <RingBar class="h-1/3 box-border pb-4" :data="data.fileSearchVolumeData"></RingBar>
        <LineChartRight class="h-1/3" :data="data.questionTokensByTimeData"></LineChartRight>
      </div>
    </div>
  </div>
</template>
<script setup>
  import RadarBar from '@/components/RadarBar.vue'
  import PieBar from "@/components/PieBar.vue";
  import LineChartLeft from "@/components/LineChartLeft.vue";
  import TotalData from '@/components/TotalData.vue'
  import VerticalBar from '@/components/VerticalBar.vue'
  import RingBar from '@/components/RingBar.vue'
  import WordCloud from '@/components/WordCloud.vue'
  import LineChartRight from "@/components/LineChartRight.vue";
  
  import { ref } from 'vue'
  import {
    getfileSearchVolumeData,
    getHotWordData, 
    getQuestionTokensByTimeData,
    getQuestionConsumeTimeData,
    getQuestionTotalSizeData,
    getSearchVolumeByTimeData,
    getSearchWordClassData,
    getTopPersonData
  } from '@/api/visualization.js'

  import {
    getTodayRange,
    getThisWeekRange,
    getThisMonthRange,
    getThisYearRange
  } from '@/utils/TimeHandler.js';

  // 添加按钮配置
  const timeButtons = [
    { label: '本日', handler: () => loadData(...getTodayRange()) },
    { label: '近一周', handler: () => loadData(...getThisWeekRange()) },
    { label: '近一月', handler: () => loadData(...getThisMonthRange()) },
    { label: '近一年', handler: () => loadData(...getThisYearRange()) }
  ]
  const selectedButtonIndex = ref(1) // 初始化为 1 ，表示选中"近一周"的按钮
  const data = ref(null)
  //加载数据
  const loadData = async (startTime, endTime, dimension) => {

    //不同时间段的问答次数
    const searchVolumeByTimeData = await getSearchVolumeByTimeData(startTime, endTime, dimension)
    //个人搜索量
    const topPersonData = await getTopPersonData(startTime, endTime,)
    //知识库引用次数
    const fileSearchVolumeData = await getfileSearchVolumeData(startTime, endTime,);
    //搜索词分类
    const searchWordClassData = await getSearchWordClassData(startTime, endTime,);
    //热词图
    const hotWordData = await getHotWordData(startTime, endTime,);
    // 查询总数
    const questionTotalSizeData = await getQuestionTotalSizeData(startTime, endTime,);
    // 不同时间段的token消耗数
    const questionTokensByTimeData = await getQuestionTokensByTimeData(startTime, endTime, dimension);
    // 大模型问答时间
    const questionConsumeTimeData_ = await getQuestionConsumeTimeData(startTime, endTime,);
    //处理大模型问答时间特殊情况（回答情况不满6类的时候）
    const questionConsumeTimeData =[
      {
          "keyString": "0-10秒",
          "number": 0,
          "max": 100,
      },
      {
          "keyString": "10-20秒",
          "number": 0,
      },
      {
          "keyString": "20秒-30秒",
          "number": 0,
      },
      {
          "keyString": "30秒-50秒",
          "number": 0
      },
      {
          "keyString": "50秒-70秒",
          "number": 0
      },
      {
          "keyString": ">=70秒",
          "number": 0
      }]
    questionConsumeTimeData_.forEach(function (value, index, array) {
      //console.log(value, index); // value 是数组中的值，index 是索引
      if(index ==0){
        questionConsumeTimeData[0].max=value["number"]
      }
      if(value["keyString"]=="0-10秒"){
        questionConsumeTimeData[0].number=value["number"]
      }else if(value["keyString"]=="10秒-20秒"){
        questionConsumeTimeData[1].number=value["number"] 
      }else if(value["keyString"]=="20秒-30秒"){
        questionConsumeTimeData[2].number=value["number"] 
      }else if(value["keyString"]=="30秒-50秒"){
        questionConsumeTimeData[3].number=value["number"] 
      }else if(value["keyString"]=="50秒-70秒"){
        questionConsumeTimeData[4].number=value["number" ] }
      else if (value["keyString"]==">=70秒"){
        questionConsumeTimeData[5].number=value["number"] 
      }
    });

    data.value ={
      "questionConsumeTimeData": questionConsumeTimeData,
      "topPersonData": topPersonData,
      "questionTokensByTimeData": questionTokensByTimeData,
      "searchWordClassData": searchWordClassData,
      "fileSearchVolumeData": fileSearchVolumeData,
      "searchVolumeByTimeData": searchVolumeByTimeData,
      "hotWordData": hotWordData,
      "totalData": {
          "total": questionTotalSizeData,
          "goodNum": "87788",
          "badNum": "65446",
      },
    }
    console.log(data.value)
  }


  // setInterval(() => {
  //   loadData(...getThisWeekRange())
  // }, 10000)

// 组件挂载时加载近一周的数据
loadData(...getThisWeekRange())

import { useRouter } from 'vue-router';

const router = useRouter();
//返回大屏导航页
const goBackToDashboard = () => {
  // 假设大屏导航栏的路由路径是 '/dashboard'
  router.push('/bigScreenNavigation');
};
</script>
<style scoped>
/* 添加流光动画 */
@keyframes title-glow {
  0% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.8; transform: scale(1); }
}

/* 标题呼吸动画 */
.animate-pulse {
  animation: title-glow 2s ease-in-out infinite;
}

/* 按钮悬停效果 */
button {
  transition: 
    background-color 0.3s,
    transform 0.3s,
    box-shadow 0.3s;
}

/* 装饰线动画 */
.bg-gradient-to-r::after,
.bg-gradient-to-l::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(56, 180, 251, 0.3), transparent);
  animation: flow 3s linear infinite;
}

@keyframes flow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
</style>